<template>
	<view class="page">
		<view class="tabs">
			<u-subsection :list="list" mode="subsection" :current="current" @change="change"></u-subsection>
		</view>

		<view class="content">
			<view v-show="current === 0">
				</br>
				<uni-table ref="table" border stripe >
					<uni-tr>
						<uni-th align="center" width="140rpx">线路名</uni-th>
						<uni-th align="center" width="140rpx">终点</uni-th><!-- width="150" -->
						<uni-th align="center" width="20rpx">设置</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData1" :key="index">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.stop }}</uni-td>
						<uni-td align="center">
							<button class="uni-button" v-show="index!=0" size="mini" type="primary" @click="turnup(index)">上移</button>
							<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
						</uni-td>
					</uni-tr>
				</uni-table>
				</br>
				<button @click="submitForm" type="primary">提交</button>
			</view>
			<view v-show="current === 1">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear"></uni-search-bar>
				</br>
				<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="20rpx"></uni-th>
						<uni-th align="center">线路名</uni-th><!--  :filterType="search" :filterData="['1路']" -->
						<uni-th align="center">终点</uni-th><!-- width="150" -->
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">
							<uni-icons type="plus" size="20" class="icon" @click="choose(item)"></uni-icons>
						</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.stop }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		siteline
	} from '@/api/common.js';
	import {
		lines
	} from '@/api/common.js';
	export default {
		data() {
			return {
				list: ['已选', '备选'],
				current: 0,
				order: '1', //订单ID
				sid: '11', //二維碼值
				searchValue: '',
				loading: false,
				tableData: [], //全部
				tableData1: [], //已配置
				selectedIndexs: [],
				update: true,
			};
		},
		onLoad: function(option) {
			console.log("onLoad0---"+ option.order+'--'+option.sid)
			this.order = option.order
			this.sid = option.sid
			this.siteline();
			this.search();
		},
		onShow() {
			console.log("onShow，需要刷新数据")
		},

		methods: {
			change(index) {
				this.current = index
			},

			turnup(e) {
				console.log('上移：' + e)
				if (e == 0) {
					uni.showToast({
						title: '当前线路为第一条，不能再上移啦！',
						icon: 'none'
					});
				} else {
					this.update = false
					let Value = this.tableData1[e - 1]
					console.log('上一条1：' + JSON.stringify(this.tableData1[e - 1]))
					console.log('下一条1：' + JSON.stringify(this.tableData1[e]))
					this.tableData1[e - 1] = this.tableData1[e]
					this.tableData1[e] = Value
					console.log('上一条2：' + JSON.stringify(this.tableData1[e - 1]))
					console.log('下一条2：' + JSON.stringify(this.tableData1[e]))
					console.log(this.tableData1)
					this.$nextTick(() => {
						this.update = true
					})
				}
			},
			
			del(e) {
				console.log('删除：' + e)
				this.$delete(this.tableData1, e)
			},
			
			submitForm() {
				uni.$emit('updateData', this.tableData1);
				uni.navigateBack({
					delta: 1
				})
			},
			
			//点击搜索后执行 查询线路
			search(res) {
				console.log("search:" + res.value);
				this.search();
			},
			
			search() {
				let param = {};
				param.pid = this.order;
				param.lname = this.searchValue;
				lines(param).then(res => {
					console.log(res);
					this.tableData = res;
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			siteline() {
				var sid = this.sid
				console.log('站点唯一号：'+sid)
				siteline(sid).then(res => {
					this.tableData1 = res.Message.list;
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			//点击清除按钮时触发事件
			clear(res) {
				console.log("clear:" + res.value);
			},
			//点击取消按钮时触发事件
			cancel(res) {
				console.log("cancel:" + res.value);
			},
			//输入文字变化后执行
			input(res) {
				console.log('----input:', res)
				this.searchValue = res;
				this.search(res);
			},
			//input 失去焦点时触发事件
			blur(res) {},
			//input 获取焦点时触发事件
			focus(e) {},
			choose(e) {
				console.log('选择：' + JSON.stringify(e))
				console.log('--：' + JSON.stringify(this.tableData1))
				this.tableData1.push(e);
				uni.showToast({
					title: e.name + '添加成功！',
					icon: 'none'
				});
			},
		},
	};
</script>

<style lang="scss" scoped>

</style>